<template>
	<div>
		<div class="return-bar">
			<i class="iconfont" @click="back()">&#xe668;</i>
			用户登录
		</div>

		<div class="banner detail_top">
			<img src="../../assets/images/logo.png" />
		</div>

		<div class="login-from">
			<validator name="validation1">
					<div class="login-control">

						<div class="control">
							<span>手机号</span>
							<input v-model="username" placeholder="请输入手机号" v-validate:username="{required:true, maxLength: 10}" maxLength="11"  @keyup="onKeyup " />
						</div>

						<div class="control">
							<span>密码</span>
							<input v-show=" !showPWD " v-model="password" type="password" placeholder="登录密码" v-validate:password="{required:true}" @keyup="onKeyup "  />
							<input v-show=" showPWD " v-model="password" type="text" placeholder="登录密码" v-validate:password="{required:true}" @keyup="onKeyup " />
							<i class="iconfont icon-eyesclose" @click="switchKw()">{{{iconString}}}</i>
						</div>

						<div class="control">
							<span>图片验证码</span>
							<input v-model="verify" placeholder="请输入图形验证码" v-validate:code="{required:true, maxLength: 4}" maxLength="4"  @keyup="onKeyup " />
							<img class="verify" v-show="show_img" src="{{img_src}}"  @click="reloadImg" />
						</div>

						<ul class="cbox">
							<li>
								<input class="p_btn postIt" @click="login()"  type="button" value="登录" />
							</li>
						</ul>

						<div class="link">
							<a class="relation-link" v-link="{ path: '/forget-pwd' }">忘记密码</a>
							<span class="spli"> | </span>
							<a class="relation-link red" v-link="{ path: '/reg' }">立即注册</a>
						</div>
					</div>
			</validator>
		</div>
        <com-alert
        :show.sync="alertData.show"
        :title.sync="alertData.title"
        :buttontxt.sync="alertData.buttontxt"
        :content.sync="alertData.content"
        ></com-alert>
	</div>
</template>

<script>
import '../../assets/sass/user/login.scss'
import {c_is_logined, c_reg_verify_img, Api_Login} from '../../config/api'
import api from '../../data/api';
import ComAlert from '../../components/common/alert'
var time_ment = null;
export default {

	data () {
		return {

            alertData:{show:false,title:'标题',buttontxt:'确定',  content:'sign' },

			from: '',
			username: localStorage.getItem("tel") || '',
			password: '',
			itype:'password',
			loginType:'',
			showPWD:false,
			iconString:'&#xe712;',
			img_src:'',
			show_img:true,
			verify:'',
			busy:false
		}
	},

    components:{
        ComAlert
	},

	methods: {

		onKeyup(key){
			if(key.keyCode == 13) this.login();
			//console.log('112')
		},
		reloadImg(){
			/*this.$http({url: c_img_verify, method: 'GET'}).then(function (response) {
				this.img_src = c_img_verify;
			});*/
			//clearInterval(time_ment);
			this.show_img = false;
			this.img_src = '';
			var that = this;
			var timestamp = Date.parse(new Date());
			timestamp = timestamp / 1000;
			var rkey = that.global.r_key()
			var pkey = that.global.p_key()
			//this.img_src = c_img_verify
			/* time_ment = setInterval(function(){
				that.show_img = true;
				that.img_src = c_reg_verify_img+'&t='+timestamp+'&r_key='+rkey+'&p_key='+pkey
			},100);  */
			setTimeout(function() {
				that.show_img = true;
				that.img_src = c_reg_verify_img+'&t='+timestamp+'&r_key='+rkey+'&p_key='+pkey
			}, 1);
		},


		switchKw(){
			if(this.iconString == '&#xe712;')
				this.iconString = '&#xe648;'
			else
				this.iconString = '&#xe712;'
			this.showPWD = !this.showPWD;
		},
		back(){
			//window.history.back();
			this.$route.router.go('/')
		},



		submitFrm(key){
			this.loginType = key;
			this.login();
		},


		async login() {

			if (this.$validation1.invalid) return false;
			if (this.busy) return false;

			this.busy = true;
			this.$store.dispatch('setShowLoading', true);
			var username = this.username;
			var password = this.password;
			var data = {'verify':this.verify, 'username': username, 'password': password}
			/* this.$http.post(Api_Login, data,'').then(function (response) {
					var rs = response.data;
					this.busy = false;
					this.$store.dispatch('setShowLoading', false);
					if(!rs.status){
						alert(rs.msg)
						this.reloadImg();
						this.verify='';
					}else {
						localStorage.setItem("tel", username);
						sessionStorage.setItem("login", true);

						if(!this.from){
							this.$route.router.go('/')
						}else {
							this.$route.router.go('/'+this.from)
						}

					}
			}, function (response) {

			}); */
			var res = await api.user.login(data);

			this.busy = false;
			this.$store.dispatch('setShowLoading', false);
			if(res.status){

				localStorage.setItem("tel", username);
				sessionStorage.setItem("login", true);
				if(!this.from){
					this.$route.router.go('/')
				}else {
					this.$route.router.go('/'+this.from)
				}

			}else {
				this.alertData = {show:true, title:'信息提示', buttontxt:'确定', content:res.msg};
				this.reloadImg();
				this.verify='';
			}


		},


		async is_login(){
			//console.log('123')
			/* this.$http({url: c_is_logined, method: 'GET'}).then(function (rs) {
				if(rs.data.status){
					this.$route.router.go('/')
				}
			}, function (response) {
					console.log(response)
			}); */

			var res = await api.user.is_Logined();
			if(res.status){
				this.$route.router.go('/')
			}

		},

	},
	route: {
		activate ( transition ) {


			var timestamp = Date.parse(new Date());
			timestamp = timestamp / 1000;

			var rkey = this.global.r_key()
			var pkey = this.global.p_key()

			//this.img_src = c_reg_verify_img+'&t='+timestamp
			this.img_src = c_reg_verify_img+'&t='+timestamp+'&r_key='+rkey+'&p_key='+pkey;

			this.from = transition.to.query.from
			//console.log(this.from)
			/* if(sessionStorage.getItem("login")){
				this.$route.router.go('/')
			}else{
				transition.next();
			} */
			transition.next();
			this.is_login();


			//测试帐号
			if(process.env.NODE_ENV == 'dev'){
				this.username = '18617037239';
				this.password = '123456';
			}
		}
	}
}
</script>
